<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery-2.1.1.js"></script>
    <script src="./js/underscore.js"></script>
    <script src="./js/backbone.js"></script>


</head>
<body>
hello backbone

<div id="contianer"></div>
<script type="java/template" id="myTemplate">
    <label><%=abc%></label>
    <input type="text" id="abc"/>
    <input type="button" id="commit" value="commit"/>
</script>

<script type="text/javascript">
    MyView = Backbone.View.extend({
        initialize: function () {
            console.log('init');
            this.render();
        },
        render: function () {
            // compile
            var template = _.template($('#myTemplate').html());

            var variables = {abc: 'wzq-search'};
            template = template(variables);
            // load
            this.$el.html(template);
        },
        events: {
            "click input[id=commit]": "search"
        },
        search: function (event) {
            // how to get value from template
            console.log('search:');
        }

    });

    var myView = new MyView({el: $('#contianer')});

</script>

</body>
</html>